import React from "react";

import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import PageHeader from "@/components/PageHeader";
import { ControllerType } from "@/components/items-list/ItemsList";
import { BrowserRouter as Router,Link } from 'react-router-dom';//
import "./Contract.css";
import {Button, Col, Divider,Radio, Form, Input, Row, Table, ConfigProvider, Layout,Modal, Tree,Select,AutoComplete} from "antd/lib";
import Menu from "antd/lib/menu";
import Dropdown from "antd/lib/dropdown";
import zhCN from 'antd/es/locale/zh_CN';
import locale from 'antd/es/date-picker/locale/zh_CN';
import Contracts from "@/services/contracts";
import Customer from "@/services/customer";
import DatePicker from "antd/lib/date-picker";
// const hashHistory = createHashHistory();
import {createBrowserHistory} from 'history'
import Enums from "@/services/enums";
import { currentUser } from "@/services/auth";
import routes from "@/services/routes";
import notification from "@/services/notification";
import {get} from "lodash";
import moment from "moment";
import GlobalFunctions from '@/store/globalFunctions';
import {WarningOutlined,SecurityScanTwoTone,DownOutlined,AppstoreFilled, UpOutlined} from "@ant-design/icons";
import QueryShowField from "@/services/queryshowfield";
import CreateQueryShowFieldDialog from "@/components/enums/QueryShowFieldDialog";
const customHistory = createBrowserHistory();
const { Sider } = Layout;
const { confirm } = Modal;
const getRowClassName = (record, index) => {
  let className = '';
  if (index % 2 === 0) className = "oddRow";
  return className
}
class ContractList extends React.Component {
  state = {
    page: 1,
    pagesize: 15,
    total:15,
    field: "bill_date",
    order: 1,
    loading: false,
    amountsel:false,
    code: localStorage.getItem("contractslistcode") ? (localStorage.getItem("contractslistcode")!=undefined ? localStorage.getItem("contractslistcode"):'') : '',
    name: localStorage.getItem("contractslistname")? (localStorage.getItem("contractslistname")!=undefined ? localStorage.getItem("contractslistname"):'') : '',
    party_a: localStorage.getItem("contractslistparty_a") ? (localStorage.getItem("contractslistparty_a")!=undefined ? localStorage.getItem("contractslistparty_a"):'') : '',
    data: [],
    gData: [],
    departmentdata:[],//HRP部门表
    selectedKeys: '',
    selectedTitle: '',
    departmentid: [],//--经办部门
    amount:localStorage.getItem("contractslistamount") ? (localStorage.getItem("contractslistamount")!=undefined ? localStorage.getItem("contractslistamount"):0) : 0,
    amountmax: localStorage.getItem("contractslistamountmax") ? (localStorage.getItem("contractslistamountmax")!=undefined ? localStorage.getItem("contractslistamountmax"):0) : 0,
    bill_date: [],
    iszhaobiao:localStorage.getItem("contractslistiszhaobiao") ? (localStorage.getItem("contractslistiszhaobiao")!=undefined ? localStorage.getItem("contractslistiszhaobiao"):"2") : "2",
    sign_date:[],
    start_date:[],
    end_date:[],
    customerdata:[],
    amountid: 0,
    amountdata:[{id:0,name:"所有"},{id:1,name:"小于1千"},{id:2,name:"1千-1万"},
    {id:3,name:"1万以上"},{id:4,name:"自定义"}],
    amounttype: localStorage.getItem("contractslistamounttype") ? (localStorage.getItem("contractslistamounttype")!=undefined ? localStorage.getItem("contractslistamounttype"):'') : '',
    pricetype: localStorage.getItem("contractslistpricetype") ? (localStorage.getItem("contractslistpricetype")!=undefined ? localStorage.getItem("contractslistpricetype"):'') : '',
    pricetypedata:[{id:0,name:"总价合同"},
    {id:1,name:"单价合同"},{id:2,name:"费率合同"},{id:3,name:"成本补偿"},{id:4,name:"绩效激励"}],
    amounttypedata:[],
    ifseal:localStorage.getItem("contractslistifseal") ? (localStorage.getItem("contractslistifseal")!=undefined ? localStorage.getItem("contractslistifseal"):"0") : "0",
    isbulu:localStorage.getItem("contractslistisbulu") ? (localStorage.getItem("contractslistisbulu")!=undefined ? localStorage.getItem("contractslistisbulu"):"0") : "0",
    showall: false,
    queryshowfielddata: [],
    stremployeename:currentUser.name,
  };
  static propTypes = {
    controller: ControllerType.isRequired,
  };
    items=[{
      name:"cght",
      slug:"imgs",
      tags:"tags",
      is_draft:"df",
      is_archived:true
    }];
  componentWillMount() {
    let  params={
      code: "",
      name: "",
      userid: currentUser.id,
    }
    Customer.querydepartment(params).then(data => {
      this.setState({
        departmentdata: data,
      });
    });
    Enums.items("amounttype").then(data => {
      this.setState({
        amounttypedata: data,
      });
    });
    params={
      page: 1,
      pagesize: 10000,
      strcustomercode: '',
      strcustomername: '',
    }
    Customer.getcustomerlist(params).then(data => {
        this.setState({
            customerdata:data.data,
        });
    });
    params={
      billtype: this.props.warns==="2" ? "contracts":"",
      ifseal:"2",
      id: 0,
    }
    Contracts.getsellist(params).then(data => {
      this.setState({
        contractsdata: data,
      });
    });
    this.loadData();
    this.fieldsshowload();
    let param={
      page: this.state.page,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      party_a: this.state.party_a,
      type: this.state.selectedKeys,
      userid: currentUser.id,
      id:0,
      departmentid: this.state.departmentid,
      amount:this.state.amount,
      amountmax:this.state.amountmax,
      datadown: false,
      warns: this.props.warns,
      amounttype:this.state.amounttype,
      pricetype:this.state.pricetype,
      ifseal:this.state.ifseal,
      field: this.state.field,
      order: this.state.order,
      isbulu:this.state.isbulu,
      iszhaobiao: this.state.iszhaobiao,
      stremployeename: this.state.stremployeename,
    }
    this.seldata(param);
  }
  isEmptyobj = (str) => {
    if(str==='' || str === null || str === 'null' || str === undefined || str === 'undefined'){
        return true;
    }else{
        return false;
    }
}
  seldata = (params = {}) => {
    if(!GlobalFunctions.isEmptyobj(this.state.bill_date)){
      if(this.state.bill_date.length===2){
        params.begindate=this.state.bill_date[0].format('YYYY-MM-DD');
        params.enddate=this.state.bill_date[1].format('YYYY-MM-DD');
      }
    }
    if(!GlobalFunctions.isEmptyobj(this.state.sign_date)){
      if(this.state.sign_date.length===2){
        params.beginsign_date=this.state.sign_date[0].format('YYYY-MM-DD');
        params.endsign_date=this.state.sign_date[1].format('YYYY-MM-DD');
      }
    }
    if(!GlobalFunctions.isEmptyobj(this.state.start_date)){
      if(this.state.start_date.length===2){
        params.beginstart_date=this.state.start_date[0].format('YYYY-MM-DD');
        params.endstart_date=this.state.start_date[1].format('YYYY-MM-DD');
      }
    }
    if(!GlobalFunctions.isEmptyobj(this.state.end_date)){
      if(this.state.end_date.length===2){
        params.beginend_date=this.state.end_date[0].format('YYYY-MM-DD');
        params.endend_date=this.state.end_date[1].format('YYYY-MM-DD');
      }
    }
    if(params.datadown){
      let AjaxUrl = 'api/contracts/list';
      fetch(AjaxUrl ,{
       method: 'POST',
       body: window.JSON.stringify(params),
       credentials: 'include',
       headers: new Headers({
         'Content-Type': 'application/json'
       })}).then((response) => {
       response.blob().then(blob => {
         const aLink = document.createElement('a');
         document.body.appendChild(aLink);
         aLink.style.display='none';
         const objectUrl = window.URL.createObjectURL(blob);
         aLink.href = objectUrl;
         aLink.download = '合同列表.xlsx';
         aLink.click();
         document.body.removeChild(aLink);
       });
     }).catch((error) => {
       console.log(error);
     });
    }
    else{
      this.setState({ loading: true });
      Contracts.getlist(params).then(data => {
          this.setState({
              loading: false,
              data:data.data,
              page: params.page,
              pagesize: params.pagesize,
              total: data.total,
              field: params.field,
              order: params.order,
          });
      });
    }
  };
  bill_dateonchange = (value) => {
      localStorage.setItem("contractslistbill_date", value);
        this.setState({
          bill_date: value,
      });
   };
  amountchange = (e) => {
    let amountid=e.target.value;
    let amountsel;
    if(amountid===4){
      amountsel=true;
    }else{
      amountsel=false;
    }
    localStorage.setItem("contractslistamountid", amountid);
    localStorage.setItem("contractslistamountsel", amountsel);
    this.setState({
      amountid: amountid,
      amountsel: amountsel,
  });
};
  handlesel = (index) => {
    let amount;
    let amountmax;
    if(this.state.amountid===0){
      amount=0;
      amountmax=0; 
    }else if(this.state.amountid===1){
      amount=0;
      amountmax=1000; 
    }else if(this.state.amountid===2){
      amount=1000;
      amountmax=10000; 
    }else if(this.state.amountid===3){
      amount=10000;
      amountmax=0; 
    }else if(this.state.amountid===4){
      amount=this.state.amount;
      amountmax=this.state.amountmax; 
    }
    let datadown =false;
    if(index===2){
      datadown =true;
    }
    let param={
      page: 1,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      party_a: this.state.party_a,
      type: this.state.selectedKeys,
      userid: currentUser.id,
      id:0,
      departmentid: this.state.departmentid,
      amount:amount,
      amountmax:amountmax,
      datadown: datadown,
      warns: this.props.warns,
      amounttype:this.state.amounttype,
      pricetype:this.state.pricetype,
      ifseal:this.state.ifseal,
      field: this.state.field,
      order: this.state.order,
      isbulu: this.state.isbulu,
      iszhaobiao: this.state.iszhaobiao,
      stremployeename: this.state.stremployeename,
    }
    this.seldata(param);
  };
  handleDelete = record => {
    if(record.blnisinactive)
    {
       notification.error("只有在草稿状态可以删除，删除失败！");
       return;
    }
    if(record.status !==0)
    {
       notification.error("只有在草稿状态可以删除，删除失败！");
       return;
    }
    confirm({
      title: '确定删除合同?',
      content: record.code,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        Contracts.delete(record).then(()=>{
          notification.success("合同删除成功.");
          let param={
            page: 1,
            pagesize: this.state.pagesize,
            code: this.state.code,
            name: this.state.name,
            party_a: this.state.party_a,
            type: this.state.selectedKeys,
            userid: currentUser.id,
            id:0,
            departmentid: this.state.departmentid,
            amount:this.state.amount,
            amountmax:this.state.amountmax,
            datadown: false,
            warns: this.props.warns,
            amounttype:this.state.amounttype,
            pricetype:this.state.pricetype,
            ifseal:this.state.ifseal,
            field: this.state.field,
            order: this.state.order,
            isbulu: this.state.isbulu,
            iszhaobiao: this.state.iszhaobiao,
            stremployeename: this.state.stremployeename,
          }
          this.seldata(param);
        }).catch(error => {
          notification.error(get(error, "response.data.message", "删除失败."));
        });
      },
    });
  };
  handleTableChange = (pagination, filters, sorter) => {
    let field=sorter.field;
    let order=0;
    if(sorter.order==="descend"){
      order=1;
    }
    let param={
      field: field,
      order: order,
      page: pagination.current,
      pagesize: pagination.pageSize,
      code: this.state.code,
      name: this.state.name,
      party_a: this.state.party_a,
      type: this.state.selectedKeys,
      userid: currentUser.id,
      id:0,
      departmentid: this.state.departmentid,
      amount:this.state.amount,
      amountmax:this.state.amountmax,
      datadown: false,
      warns: this.props.warns,
      amounttype:this.state.amounttype,
      pricetype:this.state.pricetype,
      ifseal:this.state.ifseal,
      isbulu: this.state.isbulu,
      iszhaobiao: this.state.iszhaobiao,
      stremployeename: this.state.stremployeename,
    }
    this.seldata(param);
  };
  loadData=()=> {
    Enums.items("contract_enum").then(data => {

      const loop = (das, index) => {
        let items=[];
        das.forEach((item) => {
          item.icon= <SecurityScanTwoTone />;
          if (item.children) {
            item.children= loop(item.children, index+1);
          }
          items.push(item);
        });
        return items;
      };
      let datas=loop(data,0)
      this.setState({
        loading: false,
        gData: datas,
        selectedKeys: '',
        selectedTitle: '',
      });
    });
  }
  handleclear = () => {
    this.setState({
      code:  '',
      name: '',
      party_a: '',
      selectedKeys: '',
      selectedTitle: '',
      departmentid: [],//--经办部门
      amount: 0,
      amountmax:  0,
      bill_date: [moment().startOf('year'),moment()],
      amountid: 0,
      amounttype:'',
      pricetype: '',
      ifseal:"0",
      isbulu:"0",
      iszhaobiao:"2",
      sign_date:[],
      start_date:[],
      end_date:[],  
    });
    localStorage.setItem("contractslistcode", "");
    localStorage.setItem("contractslistname", "");
    localStorage.setItem("contractslistparty_a", "");
    localStorage.setItem("contractslistamountmax", "");
    localStorage.setItem("contractslistamounttype", "");
    localStorage.setItem("contractslistpricetype", "");
    localStorage.setItem("contractslistifseal", "0");
    localStorage.setItem("contractslistisbulu", "0");
    localStorage.setItem("contractslistiszhaobiao", "2");
  }
  handlefieldshow = () => {
    CreateQueryShowFieldDialog.showModal({ queryshowfield: this.state.queryshowfielddata })
      .onClose((result = {}) => {
        if (result.success) {
          this.fieldsshowload();
        }
      }).onDismiss(() => {
      });
  }
  fieldsshowload = () => {
      QueryShowField.getbycode("contractslist"+this.props.warns).then(data => {
        this.setState({
          queryshowfielddata: data,
        });
      });
  }
  render() {
    // const { currentPage } = this.state;
      const paginationProps = {
            showSizeChanger: true,
            // showQuickJumper: true,
            total: this.state.total, // 数据总数
            pageSize: parseInt(this.state.pagesize), // 每页条数
            current: parseInt(this.state.page), // 当前页码
            pageSizeOptions: ["10", "20", "30","100"],
            showTotal: ((total) => {
              return `共 ${total} 条`;
            }),
          };
      let listcolumns = [];
      listcolumns.push({
        title: '操作',
       // width: 100,
        key: 'action',
        render: (record) => (
          <span>
          <Button type="primary" >
            <a href={`/contract/look/${record.id}`}>查看</a>
          </Button>
          {record.status ===0 &&
            (<Divider type="vertical" />)}
            {record.status ===0 &&
            (<Button type="primary" onClick={() => this.handleDelete(record)} >
            删除
          </Button>)}
          </span>
        ),
        });
      if (this.state.queryshowfielddata.fieldsshow !== undefined) {
        (this.state.queryshowfielddata.fieldsshow || []).map(item => {
          let items = this.state.queryshowfielddata.fieldsall.filter((p) => {
            return p.key === item;
          });
          if (items.length > 0) {
            listcolumns.push({
              title: items[0].title,
              dataIndex: item,
              key: item,
              sorter: (a, b) => a[item] > b[item] ? 1 : -1
            })
          }
          return item;
        }
        );
      }

    return (
  <ConfigProvider locale={zhCN}>
        <div style={{ width: "400px", height: "60px" }}>
          <div style={{ width: "20px", height: "50px", float: "left" }}>
          </div>
          <div style={{ width: "50px", height: "50px", float: "left" }}>
            <img src="/static/images/contractlist.png" alt="contracts" loading="lazy" />
          </div>
          <div style={{ width: "320px", height: "30px", float: "left" }}>
            <h3 style={{ margin: "7px", padding: "0" }}>{"合同列表"}</h3>
          </div>
        </div>
       <Layout>
         <Layout style={{ padding: '0 24px 24px' }}> 
         {this.state.showall && (<><Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              合同单位:</div></Col>
              <Col span={6}>
              <AutoComplete
                style={{ width: "100%" }}
                value={this.state.party_a} 
                onChange={value => {
                  localStorage.setItem("contractslistparty_a", value);
                  this.setState({party_a:value});}}
                placeholder="合同单位"
                filterOption={(inputValue, option) => 
                  option.value.indexOf(inputValue) !== -1}>
                {(this.state.customerdata || []).map(item => (
                  <AutoComplete.Option key={item.strcustomername} value={item.strcustomername}>{item.strcustomername}</AutoComplete.Option>
                ))}
              </AutoComplete>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              经办部门:</div></Col>
              <Col span={6}>
              <Select style={{ width:  "100%" }}
                    showSearch
                    mode="multiple"
                    allowClear
                    optionFilterProp="children"
                      value={this.state.departmentid}
                      onChange={value => {
                        localStorage.setItem("contractslistdepartmentid", value);
                        this.setState({departmentid:value});}} >
              {(this.state.departmentdata || []).map(item => (
                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              ))}
              </Select>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              起草日期:</div></Col>
              <Col span={6}>
              <DatePicker.RangePicker
              locale={locale}
              style={{ width:  "100%" }}
              value={this.state.bill_date}
              onChange={this.bill_dateonchange}
              placeholder="日期"
              autoFocus
            />
              </Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              金额:</div></Col>
              <Col span={6}>
              <Radio.Group onChange={this.amountchange} 
                style={{ width:  "100%" }}
                value={this.state.amountid}>
                  <Radio value={0}>所有</Radio>
                  <Radio value={1}>&lt;1千</Radio>
                  <Radio value={2}>1千-1万</Radio>
                  <Radio value={3}>&gt;1万</Radio>
                  <Radio value={4}>自定义</Radio>
                </Radio.Group>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              合同类型:</div></Col>
              <Col span={6}>
              <AutoComplete
                style={{ width: "100%" }}
                value={this.state.pricetype} 
                onChange={value => {
                  localStorage.setItem("contractslistpricetype", value);
                  this.setState({pricetype:value});}}
                placeholder="合同类型"
                filterOption={(inputValue, option) => 
                  option.value.indexOf(inputValue) !== -1}>
                {(this.state.pricetypedata || []).map(item => (
                  <AutoComplete.Option key={item.name} value={item.name}>{item.name}</AutoComplete.Option>
                ))}
              </AutoComplete>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              资金类别:</div></Col>
              <Col span={6}>
              <AutoComplete
                style={{ width: "100%" }}
                value={this.state.amounttype} 
                onChange={value => {
                  localStorage.setItem("contractslistamounttype", value);
                  this.setState({amounttype:value});}}
                placeholder="资金类别"
                filterOption={(inputValue, option) => 
                  option.value.indexOf(inputValue) !== -1}>
                {(this.state.amounttypedata || []).map(item => (
                  <AutoComplete.Option key={item.key} value={item.key}>{item.key}</AutoComplete.Option>
                ))}
              </AutoComplete>
              </Col>
              </Row>
              {this.state.amountid===4 && (<Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              金额范围:</div></Col>
              <Col span={6}>
              <Input style={{ width:  100 }}
                  value={this.state.amount}
                  disabled ={!this.state.amountsel}
                  onChange={e => {
                    localStorage.setItem("contractslistamount", e.target.value);
                    this.setState({amount:e.target.value});}}
                  placeholder="金额(¥)"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  type="number"
                  />
              -
              <Input style={{ width:  100 }}
                  value={this.state.amountmax}
                  disabled ={!this.state.amountsel}
                  onChange={e => {
                    localStorage.setItem("contractslistamountmax", e.target.value);
                    this.setState({amountmax:e.target.value});}}
                  placeholder="金额(¥)"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  type="number"
                  />   
              元
              </Col>
              </Row>)}
              {this.props.warns ==="2" && (<Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              是否用印:</div></Col>
              <Col span={6}>
              <Radio.Group onChange={e => {
                  localStorage.setItem("contractslistifseal", e.target.value);
                  this.setState({ifseal:e.target.value});}}
             value={this.state.ifseal}>
              <Radio value={"0"}>所有</Radio>
              <Radio value={"1"}>未用印</Radio>
              <Radio value={"2"}>已用印</Radio>
            </Radio.Group>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              开始日期:</div></Col>
              <Col span={6}>
              <DatePicker.RangePicker
              locale={locale}
              style={{ width:  "100%" }}
              value={this.state.start_date}
              onChange={e => this.setState({start_date: e})}
              placeholder="日期"
              autoFocus
            />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              终止日期:</div></Col>
              <Col span={6}>
              <DatePicker.RangePicker
              locale={locale}
              style={{ width:  "100%" }}
              value={this.state.end_date}
              onChange={e => this.setState({end_date: e})}
              placeholder="日期"
              autoFocus
            />
              </Col>
              </Row>)}
              <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              是否补录:</div></Col>
              <Col span={6}>
              <Radio.Group onChange={e => {
                  localStorage.setItem("contractslistisbulu", e.target.value);
                  this.setState({isbulu:e.target.value});}}
             value={this.state.isbulu}>
              <Radio value={"5"}>所有</Radio>
              <Radio value={"0"}>正常</Radio>
              <Radio value={"1"}>补录</Radio>
              <Radio value={"2"}>历史备案</Radio>
            </Radio.Group>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              是否公开招标:</div></Col>
              <Col span={6}>
              <Radio.Group onChange={e => {
                  localStorage.setItem("contractslistiszhaobiao", e.target.value);
                  this.setState({iszhaobiao:e.target.value});}}
             value={this.state.iszhaobiao}>
              <Radio value={"2"}>所有</Radio>
              <Radio value={"1"}>是</Radio>
              <Radio value={"0"}>否</Radio>
            </Radio.Group>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              签订日期:</div></Col>
              <Col span={6}>
              <DatePicker.RangePicker
              locale={locale}
              style={{ width:  "100%" }}
              value={this.state.sign_date}
              onChange={e => this.setState({sign_date: e})}
              placeholder="日期"
              autoFocus
            /> 
            </Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              合同名称:</div></Col>
              <Col span={6}>
              <AutoComplete
                style={{ width: "100%" }}
                value={this.state.name} 
                onChange={value => {
                  localStorage.setItem("contractslistname", value);
                  this.setState({name:value});}}
                placeholder="合同名称"
                filterOption={(inputValue, option) => 
                  option.value.indexOf(inputValue) !== -1}>
                {(this.state.contractsdata || []).map(item => (
                  <AutoComplete.Option key={item.name} value={item.name}>{item.name}</AutoComplete.Option>
                ))}
              </AutoComplete>
            </Col>
            </Row></>)}
            <Row style={{ marginBottom: 5 }}>
             <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              合同编码:</div></Col>
              <Col span={6}>
              <AutoComplete
                style={{ width: "100%" }}
                value={this.state.code} 
                onChange={value => {
                  localStorage.setItem("contractslistcode", value);
                  this.setState({code:value});}}
                placeholder="合同编码"
                filterOption={(inputValue, option) => 
                  option.value.indexOf(inputValue) !== -1}>
                {(this.state.contractsdata || []).map(item => (
                  <AutoComplete.Option key={item.code} value={item.code}>{item.code}</AutoComplete.Option>
                ))}
              </AutoComplete>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              经办人:</div></Col>
              <Col span={6}>
              <AutoComplete
                style={{ width: "100%" }}
                value={this.state.stremployeename} 
                onChange={value => {
                  this.setState({stremployeename:value});}}
                placeholder="经办人"
                filterOption={(inputValue, option) => 
                  option.value.indexOf(inputValue) !== -1}>
              </AutoComplete>
              </Col>
              <Col span={8}>
                <Divider type="vertical" />
                <Button type="primary" onClick={() => this.handlesel(1)} >
                  <i className="fa fa-search m-r-5" />
                  查询
                </Button>
                <Divider type="vertical" />
                <Button onClick={() => this.handleclear()} >
                  清空
                </Button>
                <Divider type="vertical" />
                <Button onClick={() => { this.setState({ showall: !this.state.showall }); }} >
                  {this.state.showall && (<UpOutlined />)}
                  {!this.state.showall && (<DownOutlined />)}
                  {this.state.showall ? '默认' : '更多'}
                </Button>
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={10}>
                <Button type="primary" >
                  <i className="fa fa-plus m-r-5" />
                  <a href="contract/new/0" style={{ color: "white" }}>新建合同</a>
                </Button>
                <Divider type="vertical" />
                <Dropdown
                  trigger={["click"]}
                  overlay={
                    <Menu>
                        <Menu.Item key="change-item-out">
                          <a onMouseUp={() => this.handlesel(2)}>EXCEL导出</a>
                        </Menu.Item>
                      {currentUser.hasPermission("admin") && (<Menu.Divider />)}
                      {currentUser.hasPermission("admin") && (
                        <Menu.Item key="delete-item">
                          <a onMouseUp={() => this.handlefieldshow()}>显示隐藏列</a>
                        </Menu.Item>
                      )}
                    </Menu>
                  }>
                  <Button type="primary" style={{ margin: "10px" }} data-test="CreateButton" >
                    <AppstoreFilled />更多功能
                  </Button>
                </Dropdown>
              </Col>
            </Row>
            <div>
            <Table rowKey='id'
                             rowClassName={(record, index) => getRowClassName(record, index)}
                             columns={listcolumns}
                             scroll={{x:'max-content'}}
                             dataSource={this.state.data}
                             pagination={paginationProps}
                             loading={this.state.loading}
                             onChange={this.handleTableChange}
                      />
            </div>
        </Layout> 
       </Layout> 
  </ConfigProvider>
    );
  }
}

routes.register(
  "Contract.List",
  routeWithUserSession({
    path: "/contracts",
    title: "提交的合同",
    render: pageProps => <ContractList {...pageProps} warns="0"/>,
  })
);
routes.register(
  "Contract.List1",
  routeWithUserSession({
    path: "/contracts/approve",
    title: "待审批的合同",
    render: pageProps => <ContractList {...pageProps} warns="0"/>,
  })
);
routes.register(
  "Contract.List2",
  routeWithUserSession({
    path: "/contracts/warns",
    title: "即将到期和已到期的合同",
    render: pageProps => <ContractList {...pageProps} warns="1"/>,
  })
);
routes.register(
  "Contract.List3",
  routeWithUserSession({
    path: "/contracts/checked",
    title: "已用印的合同",
    render: pageProps => <ContractList {...pageProps} warns="2"/>,
  })
);
// export default [
//   routeWithUserSession({
//     path: "/contracts",
//     title: "提交的合同",
//     render: pageProps => <ContractList {...pageProps} />,
//   }),
//   routeWithUserSession({
//     path: "/contracts/approve",
//     title: "待审批的合同",
//     render: pageProps => <ContractList {...pageProps} />,
//   }),
// ];
